<!--
这个文件定义了一个名为 `Calendar` 的 Vue 组件，用于显示一个日历。
组件包含以下部分：
- template: 使用 `el-card` 组件作为容器，包含一个标题为 "日历" 的头部和一个 `el-calendar` 组件。
  - `el-calendar` 组件的值绑定到 `value`，并设置了 `full-height` 类以占满父容器的高度。
- script setup: 使用 Vue 3 的 `<script setup>` 语法，定义了一个 `value` 变量并初始化为当前日期。
- style scoped: 定义了两个样式类 `calendar-card` 和 `full-height`，用于设置卡片的样式和日历的高度。
-->

<template>
    <el-card class="calendar-card">
        <template #header>
            <div class="card-header">
                <span>日历</span>
            </div>
        </template>
        <el-calendar v-model="value" class="full-height"></el-calendar>
    </el-card>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(new Date());
</script>

<style scoped>
.calendar-card {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.full-height {
    flex: 1;
}
</style>